<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="shortcut icon" href="/cwp/favicon.ico" type="image/x-icon" />
    <title>安防管理-视频监控</title>
    <!--引入CSS文件-->
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/list.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/table.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/paging.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/tabs.css"/>
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/btn.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/taqs.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/step.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/styles/components-css/form.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/css/videoSurveillance/videoSurveillance.css" />
    <!--引入bootstrap CSS文件-->
    <link rel="stylesheet" type="text/css" href="../../../assets/lib/bootstrap-3.3.5-dist/css/bootstrapModel.css" />
    <link rel="stylesheet" type="text/css" href="../../../assets/lib/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css"/>
    <link href="../../../assets/lib/player/css/video-js.css" rel="stylesheet" type="text/css">

    <style>
        .center_td{
            width: 180px;
        }
        .wrapper.open .right-container{
            margin-left: 240px!important;
        }
        .modal-dialog{
            margin-top: 5% !important;
        }
        .videoText{
            position: absolute;
            z-index: 999;
            top: 54%;
            left: 37.5%;
        }
        .modal-body{
            min-height: 440px;
            width: 100%;
        }
        .downloadedBtn {
            position: absolute;
            z-index: 999;
            top: 50%;
            left: 45.5%;
            color: blue;
        }

        #Video{
            text-align:center;
            height: 410px;
            /*width: 568px;*/
            height: 100%;
            position: relative;
            /*z-index: 998;*/
            background-color: #000000;
            /*display: none;*/
            /*opacity: 0;*/
        }
        .loading-box{
            position: absolute;
            z-index: 1000;
            text-align:center;
            height: 410px;
            width: 100%;
            background-color: #fff;
            /*display: none;*/
        }
        .modal-body .loading{
            width: 402px;
            margin: 0 auto;
            margin-top:180px;
            top: 0;
        }
        .modal-body .loading .tip{
            text-align: center;
            margin-bottom: 2px;
        }

        .modal-body .progress-num{
            color: #000000;
            text-align: center;
            margin-bottom: 3px;
        }
        .modal-body .progress{
            /*height: 10px;*/
        }
        .progressbar-back-text{
            display: none;
        }
        .progress-bar.active {
            -webkit-transition: width 10s ease-in-out!important;/* Safari 和 Chrome */
            -moz-transition: width 10s ease-in-out!important; /* Firefox 4 */
            -ms-transition: width 10s ease-in-out!important;/* IE */
            -o-transition: width 10s ease-in-out!important;/* Opera */
            transition: width 10s ease-in-out!important;
        }
        #iframeLoading{
            position: absolute;
            z-index: 999;
            width: 100%;
            height: 410px;
            background-color: #FFFFFF;
            left: 0;
            top: 0;
            /*display: none;*/
        }
        #vlc{
            margin: 0;padding: 0;height: 410px!important;
            width: 100%!important;;
        }
        #objVlc{
            position:absolute;
            z-index:997;
            left:0;
            top:0;
            margin: 0;
            padding: 0;
            height: 410px;
            width: 568px;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
<!--头部文件 开始-->
<div id="header"></div>
<!--头部文件 结束-->

<div class="wrapper">
    <!--左侧菜单 开始-->
    <div id="left-menu"></div>
    <!--左侧菜单 结束-->
    <!--右侧内容 开始-->
    <div class="right-container">
        <div class="right-scroll">
            <div class="t-list">
                <div class="t-list-title">
                    <h2>运营监控 &gt; 视频监控</h2>
                </div>

                <!--视频列表-->
                <div class="video-list mt-10 clearfix">
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="101">
                            <img src="../../../assets/img/videoList/video_img_101.jpg" alt=""/>
                            <h2 class="fn-center">南门</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="201">
                            <img src="../../../assets/img/videoList/video_img_201.jpg" alt=""/>
                            <h2 class="fn-center">转盘</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="301">
                            <img src="../../../assets/img/videoList/video_img_301.jpg" alt=""/>
                            <h2 class="fn-center">车棚中</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="401">
                            <img src="../../../assets/img/videoList/video_img_401.jpg" alt=""/>
                            <h2 class="fn-center">西北角监控点</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="501">
                            <img src="../../../assets/img/videoList/video_img_501.jpg" alt=""/>
                            <h2 class="fn-center">南大门花坛</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="601">
                            <img src="../../../assets/img/videoList/video_img_601.jpg" alt=""/>
                            <h2 class="fn-center">北道路车棚</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="701">
                            <img src="../../../assets/img/videoList/video_img_701.jpg" alt=""/>
                            <h2 class="fn-center">附楼门口外</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="801">
                            <img src="../../../assets/img/videoList/video_img_801.jpg" alt=""/>
                            <h2 class="fn-center">西南道路口</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="901">
                            <img src="../../../assets/img/videoList/video_img_901.jpg" alt=""/>
                            <h2 class="fn-center">北大门</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="1001">
                            <img src="../../../assets/img/videoList/video_img_1001.jpg" alt=""/>
                            <h2 class="fn-center">食堂二楼窗口</h2>
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="thumbnail" data-id="1101">
                            <img src="../../../assets/img/videoList/video_img_1101.jpg" alt=""/>
                            <h2 class="fn-center">食堂一楼窗口</h2>
                        </a>
                    </div>
                    <form id="frmMain">
                        <input type="hidden" id="sourceVideoIp" name="sourceVideoIp"/>
                        <input type="hidden" id="appId" name="appId"/>
                        <input type="hidden" id="rtspPlayAddr" name="rtspPlayAddr"/>
                        <input type="hidden" id="rtmpPlayAddr" name="rtmpPlayAddr"/>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<!--版权-->
<div id="copyright"> </div>


<!--视频监控-->
<div class="modal fade" id="modalVideoSurveillance" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <!--<a class="downloadedBtn" id="downloadedBtn" style="">下载插件</a>-->
            <!--<span class="videoText">建议使用火狐、IE浏览器观看</span>-->
            <div class="modal-body">
                <div id="Video">
                    <div class="loading-box">
                        <!--加载条-->
                        <div class="loading">
                            <div class="tip">载入中......</div>
                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-info active" role="progressbar" data-transitiongoal="100"></div>
                            </div>
                        </div>
                    </div>
                    <iframe id="iframeLoading"></iframe>

                    <div id="objVlc">
                        <video id="my_video" class="video-js vjs-default-skin" controls preload="false"  data-setup="{}" style="width: 100%;height:100%;">
                            <source src="" type="rtmp/flv"/>
                            <p class="vjs-no-js">要查看此视频，请启用JavaScript，并考虑升级到Web浏览器
                                <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
                            </p>
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


<!--jQuery库脚本-->
<!--非IE8浏览器-->
<!--[if !(IE 8)]><!--><script type="text/javascript" src="../../../assets/lib/jquery/jquery.min.js"></script><!--<![endif]-->
<!--IE8浏览器-->
<!--[if IE 8]><script type="text/javascript" src="../../../assets/lib/jquery/jquery-ie8.min.js"></script><![endif]-->
<!--日历控件样式-->
<script type="text/javascript" src="../../../assets/lib/jQuery-slimScroll-1.3.8/jquery.slimscroll.min.js"></script>
<script charset="utf-8" src="../../../assets/lib/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
<script charset="utf-8" src="../../../assets/lib/bootstrap-3.3.5-dist/js/bootstrap-progressbar.js"></script>
<script charset="utf-8" src="../../../assets/common/centerModal.js"></script>
<script charset="utf-8" src="../../../assets/common/loadHeaderAndCopyright.js"></script>
<script charset="utf-8" src="../../../assets/common/ajaxPoster.js"></script>
<script charset="utf-8" src="../../../js/emergencyScheduling/videoSurveillance/videoSurveillanceVlc.js"></script>
<script charset="utf-8" src="../../../assets/lib/player/js/video.min.js"></script>
<script>
    videojs.options.flash.swf = "../../../assets/lib/player/video-js.swf";
</script>

</body>
</html>